<!DOCTYPE html>
<html>
<head>
<title>userinfo</title>
<style>
ul {
	padding: 0;
	margin: 0;
}

li {
	list-style: none;
}

.article-list li {
	padding: 18px 24px 13px 24px;
	background: #fff;
	border-bottom: 1px solid #f4f4f4;
	/*             border-left: 1px solid rgb(221, 221, 221);
            border-right: 1px solid rgb(221, 221, 221); */
	position: relative;
	/* -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0); */
	/* box-shadow: 0 1px 2px 0 rgba(0, 0, 0); */
}

a {
	outline: none;
	text-decoration: none;
	color: rgba(0, 0, 0);
}

.article-list li h2 a:visited {
	color: #b8b8b8;
}

.article-list li h2 a:link {
	color: #3d3d3d;
}

.article-list li h2 a:hover {
	color: red;
	text-decoration: underline;
}

.article-list li h2 {
	margin: 0;
	font-size: 2rem;
	font-weight: 600;
}

.article-list li h2 a {
	max-width: 98%;
	display: block;
	color: black;
	line-height: 2.4rem;
	height: 2.4rem;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.article-list li h2 a .recommend {
	display: inline-block;
	width: 24px;
	height: 23px;
	border-radius: 4px;
	border: 1px solid #ca0c16;
	font-size: 14px;
	box-sizing: border-box;
	text-align: center;
	font-weight: 500;
	line-height: 23px;
	margin-right: 4px;
	vertical-align: 1px;
	/* position: relative; */
}

.article-list li h2 a .recommend-text {
	color: #ca0c16;
	/* position:absolute;
            top: 0.3rem;
            left:0.3rem; */
}

.article-list .article .summary {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0.8rem 0 0.2rem;
	color: #8a8a8a;
	font-size: 1.4rem;
	line-height: 2.4rem;
}
/* 添加 */
.content {
	overflow: hidden;
}

.cg-btn {
	float: right;
	margin-right: 4rem;
}
</style>
</head>

<body>
	<div class="list-body">
		<div class="sub-header">
			<div class="sub-header-title">草稿</div>
		</div>
		<div class="sub-item">
			<!-- 草稿模块 -->
			<ul class="article-list" th:each="article : ${myArticles}">
				<li class="article">
					<div class="entry">
						<div class="content">
							<h2 th:text="${article?.title}">
								<a href="#11" target="_blank" class="title">Qt实用技巧：使用OpenCV库操作摄像头拍照、调节参数</a>
							</h2>
							<div class="summary" th:text="${article?.abstracts}">
								欢迎来到“Python进阶”专栏！来到这里的每一位同学，应该大致上学习了很多 Python
								的基础知识，正在努力成长的过程中。在此期间，一定遇到了很多的困惑，对未来的学习方向感到迷茫。我非常理解你们所面临的处境。我从2007年开始接触
								python 这门编程语言，从2009年开始单一使用 python
								应对所有的开发工作，直至今天。回顾自己的学习过程，也曾经遇到过无数的困难，也曾经迷茫过、困惑过。开办这个专栏，正是为了帮助像我当年一样困惑的
								Python 初学者走出困境、快速成长。希望我的经验能真正帮到你</div>
							<button class="cg-btn layui-btn layui-btn-danger"
								th:value="${article.articleId}"
								style="width: 100px; margin-left: -16px; margin-right: 0px;"
								onclick="delectArticle(this.value)">刪除</button>
							<button class="cg-btn layui-btn" th:value="${article.articleId}"
								style="width: 100px;" onclick="editArticle(this.value)">编辑</button>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>

</body>
<script type="text/javascript">
	function editArticle(articleId) {
		window.location.href = '/article/update/' + articleId;
	}
	function delectArticle(articleId) {
		var draftNum=$('#userinfo-draftNum').text();
		alert(draftNum)
		if (confirm("确定刪除草稿？")==true){
			$.ajax({
				"url" : "/article/delete",
			    "data" : {"articleId":articleId},
			    "type" : "GET",    
			    "traditional": true,
			    "dataType" : "json",
			    success : function() {
			    	$('#list-body').load('/user/list-body-sc');
			    	$('#userinfo-draftNum').text(--draftNum);
			    	
			    }
			})

		}
	}
</script>

</html>